<template>
	<view :style="{'height':outheight,'overflow':outoverflow}">
		<view class="text-darkGray">
			<cu-custom :isBack="true" :isFull="true" bgColor="bg-white solids-bottom">
				<block slot="content">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入关键字进行搜索"
						 confirm-type="search"></input>
					</view>
				</block>
				<block slot="right">
					<!-- <text class="cuIcon-add" style="font-size: 40upx;line-height: 60upx;" @tap="add"></text> -->
				</block>
			</cu-custom>
		</view>
		<view class="uni-navbar uni-navbar-fixed uni-navbar-shadow" style="background-color:#FFFFFF">
			<view class="uni-flex uni-row">
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[0]}" @tap="showMulLinkageTwoPicker">
					区域<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[1]}" @tap="TaggarSelect(1)">
					类型<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[2]}" @tap="TaggarSelect(2)">
					房型<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[3]}" @tap="TaggarSelect(3)">
					更多<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[0]}" :style="[{top:top + 'px'}]">
		</view>
		<view class="select-box" :class="{'on':Select[1]}" :style="[{top:top + 'px'}]">
			<ul class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<li v-for="(value,index) in Price" :key="index" @tap="TaggarSelectUl(index,'Price')" :class="{'on':index == tabIndex.Price}">{{value}}</li>
			</ul>
			<view class="uni-flex uni-row select-input">
				<view class="uni-input-div">
					<input class="uni-input" type="number" placeholder="最低价" />
				</view>
				<view class="zhi">-</view>
				<view class="uni-input-div">
					<input class="uni-input" type="number" placeholder="最高价" />
				</view>
				<view class="zhi" style="margin-right: 50upx;">万</view>
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[2]}" :style="[{top:top + 'px'}]">
			<ul class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<li v-for="(value,index) in Type" :key="index" @tap="TaggarSelectUl(index,'Type')" :class="{'on':index == tabIndex.Type}">{{value}}</li>
			</ul>
			<view class="uni-flex">
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[3]}" :style="[{top:top + 'px'}]">
			<view class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<view class="select-item">
					<text class="select-item-title">面积(㎡)</text>
					<checkbox-group @change="checkboxChange" class="select-item-list clearfix">
						<label class="select-item-list-item" v-for="(item,index) in labelList1" @click="labelBtn(item.value,index,labelList1)"
						 :key="item.value">
							<checkbox :value="item.value" :checked="item.checked" v-show="false" />
							<view class="select-item-list-item-btn" :class="item.checked ?  'on' : ''">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="select-item">
					<text class="select-item-title">房龄</text>
					<checkbox-group @change="checkboxChange" class="select-item-list clearfix">
						<label class="select-item-list-item" v-for="(item,index) in labelList2" @click="labelBtn(item.value,index,labelList2)"
						 :key="item.value">
							<checkbox :value="item.value" :checked="item.checked" v-show="false" />
							<view class="select-item-list-item-btn" :class="item.checked ?  'on' : ''">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="select-item">
					<text class="select-item-title">房屋类型</text>
					<checkbox-group @change="checkboxChange" class="select-item-list clearfix">
						<label class="select-item-list-item" v-for="(item,index) in labelList3" @click="labelBtn(item.value,index,labelList3)"
						 :key="item.value">
							<checkbox :value="item.value" :checked="item.checked" v-show="false" />
							<view class="select-item-list-item-btn" :class="item.checked ?  'on' : ''">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="select-item">
					<text class="select-item-title">特色</text>
					<checkbox-group @change="checkboxChange" class="select-item-list clearfix">
						<label class="select-item-list-item" v-for="(item,index) in labelList4" @click="labelBtn(item.value,index,labelList4)"
						 :key="item.value">
							<checkbox :value="item.value" :checked="item.checked" v-show="false" />
							<view class="select-item-list-item-btn" :class="item.checked ?  'on' : ''">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="select-item">
					<text class="select-item-title">排序</text>
					<checkbox-group @change="checkboxChange" class="select-item-list clearfix">
						<label class="select-item-list-item w50" v-for="(item,index) in labelList5" @click="labelBtn(item.value,index,labelList5)"
						 :key="item.value">
							<checkbox :value="item.value" :checked="item.checked" v-show="false" />
							<view class="select-item-list-item-btn" :class="item.checked ?  'on' : ''">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="uni-flex" style="border-top:1px solid #ddd;">
				<view style="flex: 1;" class="select-btn">重置</view>
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view style="padding-top: 50px;">
			<view class="model-main model">
				<view class="warp30"></view>
				<navigator :url="'../detail/detail?detailDate='+encodeURIComponent(JSON.stringify(item))" class="uni-flex uni-row model-item" v-for="item in listData" :key="item.Id">
					<!-- <image class="model-item-img" :src="img.PicSrc" />
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title"><img src="/static/label/lable_fw.png" class="label-box kind3" /><img src="/static/label/lable_qj.png" class="label-box kind3" />专业承接家庭日常保洁、开荒保洁、钟点工、地毯</view>
						<view class="model-item-main">
							<text class="model-item-title2">150人收藏 | 1000人浏览</text>
							<view class="model-item-title2 main">
								<text class="model-item-main-price">55<text>元/小时</text></text>
								<text>香洲、斗门、金湾</text>
							</view>
							<text class="model-item-title2">珠海市亚美保洁服务部</text>
						</view>
					</view> -->
					<image class="model-item-img" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"/>
					<view class="hasvideo" @tap.stop="HasVideo" v-if="!item.PicOrVideo">
						<image src="/static/play.png" />
					</view>
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title">
							<img :src="'/static/label/lable_'+item.TypeTagImg1+'.png'" :class="'label-box kind'+item.TypeTagImgLen1" v-if="item.TypeTagImg1!=''" />
							<img :src="'/static/label/lable_'+item.TypeTagImg2+'.png'" :class="'label-box kind'+item.TypeTagImgLen2" v-if="item.TypeTagImg2!=''" />
							{{item.Title}}
						</view>
						<view class="model-item-main">
							<text class="model-item-title2">{{item.Line1Display}}</text>
							<text class="model-item-title2">{{item.Line2Display}}</text>
							<view class="model-item-title2 main">
								<text class="model-item-main-price">{{item.HighLightDisplay}}<text>{{item.HighLight2Display}}</text></text>
								<text>{{item.Line3Display}}</text>
							</view>
							<text class="model-item-title2">{{item.Line4Display}}</text>
						</view>
					</view>
				</navigator>
				<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
			</view>
		</view>
		<view class="window-bg" :class="{'on':(Select[0]||Select[1]||Select[2]||Select[3])}" @tap="RemoveBG"
		 @touchmove.stop.prevent="moveHandle"></view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	import uniNavBar from '../../../components/uni-nav-bar.vue'
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import uniLoadMore from '../../../components/uni-load-more.vue'
	export default {
		components: {
			uniIcon,
			uniNavBar,
			mpvuePicker,
			mpvueCityPicker,
			uniLoadMore
		},
		data() {
			return {
				top: 0,
				url: "http://192.168.0.168:1002",
				listData: [],
				reload: false,
				Select: [false, false, false, false],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				mulLinkageTwoPicker: [{
						value: '110000',
						label: '附近',
						children: [{
							value: "110101",
							label: "1000米"
						}, {
							value: "110102",
							label: "2000米"
						}, {
							value: "110103",
							label: "3000米"
						}]
					},
					{
						value: '110000',
						label: '不限',
						children: [{
							value: "110101",
							label: "不限"
						}]
					}, {
						value: '110000',
						label: '斗门',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "连州镇"
						}, {
							value: "110103",
							label: "白蕉镇"
						}, {
							value: "110104",
							label: "井岸"
						}, {
							value: "110105",
							label: "斗门镇"
						}, {
							value: "110106",
							label: "井岸"
						}, {
							value: "110107",
							label: "白藤头"
						}, {
							value: "110108",
							label: "五山镇"
						}]
					},
					{
						value: '110000',
						label: '金湾',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "红旗"
						}, {
							value: "110103",
							label: "三灶"
						}, {
							value: "110104",
							label: "平沙"
						}, {
							value: "110105",
							label: "南水"
						}]
					},
					{
						value: '110000',
						label: '金湾',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "南屏"
						}, {
							value: "110103",
							label: "唐家湾"
						}, {
							value: "110104",
							label: "新香洲"
						}, {
							value: "110105",
							label: "吉大"
						}, {
							value: "110102",
							label: "前山"
						}, {
							value: "110103",
							label: "夏湾"
						}, {
							value: "110104",
							label: "柠溪"
						}, {
							value: "110105",
							label: "横琴"
						}, {
							value: "110102",
							label: "上冲"
						}, {
							value: "110103",
							label: "拱北"
						}, {
							value: "110104",
							label: "湾仔"
						}, {
							value: "110105",
							label: "兰埔"
						}, {
							value: "110102",
							label: "翠微"
						}, {
							value: "110103",
							label: "拱北口岸"
						}, {
							value: "110104",
							label: "老香洲"
						}, {
							value: "110105",
							label: "凤凰北"
						}]
					},
					{
						value: '110000',
						label: '横琴新区',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "横琴"
						}]
					},
					{
						value: '110000',
						label: '珠海周边',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "江门"
						}, {
							value: "110102",
							label: "中山"
						}]
					}
				],
				Type: ["一室", "二室", "三室", "三室", "四室", "五室", "五室以上"],
				Price: ["不限", "80万以下", "80-100万", "100-120万", "120-150万"],
				tabIndex: {
					Sort: -1,
					Price: -1,
					Type: -1
				},
				page: 1,
				outheight: "auto",
				outoverflow: "auto",
				pickerValueArray: [],
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				themeColor: '#63cdf9',
				windowHeight: "",

				labelName: '',
				labelDataList: '',
				labelList1: [{
						name: '50以下',
						value: '0',
						checked: false
					},
					{
						name: '50-70',
						value: '1',
						checked: false
					},
					{
						name: '70-90',
						value: '2',
						checked: false
					},
					{
						name: '90-110',
						value: '3',
						checked: false
					},
					{
						name: '110-130',
						value: '4',
						checked: false
					},
					{
						name: '130-150',
						value: '5',
						checked: false
					},
					{
						name: '150-200',
						value: '6',
						checked: false
					},
					{
						name: '200以上',
						value: '7',
						checked: false
					}
				],
				labelList2: [{
						name: '两年内',
						value: '0',
						checked: false
					},
					{
						name: '2-5年',
						value: '1',
						checked: false
					},
					{
						name: '5-10年',
						value: '2',
						checked: false
					},
					{
						name: '10年以上',
						value: '3',
						checked: false
					}
				],
				labelList3: [{
						name: '普通住宅',
						value: '0',
						checked: false
					},
					{
						name: '别墅',
						value: '1',
						checked: false
					},
					{
						name: '公寓',
						value: '2',
						checked: false
					},
					{
						name: '平房',
						value: '3',
						checked: false
					},
					{
						name: '其它',
						value: '4',
						checked: false
					}
				],
				labelList4: [{
						name: '视频房源',
						value: '0',
						checked: false
					},
					{
						name: '安选房源',
						value: '1',
						checked: false
					},
					{
						name: '全景看房',
						value: '2',
						checked: false
					},
					{
						name: '近地铁',
						value: '3',
						checked: false
					},
					{
						name: '近学校',
						value: '4',
						checked: false
					}
				],
				labelList5: [{
						name: '面积从大到小',
						value: '0',
						checked: false
					},
					{
						name: '面积从小到大',
						value: '1',
						checked: false
					},
					{
						name: '总价从低到高',
						value: '2',
						checked: false
					},
					{
						name: '总价从高到低',
						value: '3',
						checked: false
					}
				],
				InputBottom: 0
			};
		},
		onLoad(event) {
			this.getList();
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				}
			});
			this.top = this.CustomBar + 50;
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getList();
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.getList();
		},
		methods: {
			HasVideo:function(){
				uni.navigateTo({
					url: '/pages/house/sell/video/video'
				});
			},
			add: function() {
				console.info("发布");
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			onClickItem(index) {
				console.info(this.current, index);
				if (this.current[index] !== "on") {
					this.current = ["", ""];
					this.current[index] = "on"
				}
			},
			// 二级联动选择
			showMulLinkageTwoPicker() {
				this.Select = [false, false, false, false];
				this.outheight = "auto";
				this.outoverflow = "auto";
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			onConfirm(e) {
				console.info(JSON.stringify(e));
			},
			getList() {
				var data = {
					"PageIndex": this.page,
					"PageSize": 10
				};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetX3ServiceList',
					data: data,
					success: (res) => {
						uni.stopPullDownRefresh();
						if (res.statusCode == 200) {
							let list = JSON.parse(res.data.Extend).List;
							for(let i=0;i<list.length;i++){
								switch(list[i].TypeTagDisplay){
									case "服务":
										list[i].TypeTagImg1 = 'fw';
										list[i].TypeTagImgLen1 = '3';
										break;
									default:
										list[i].TypeTagImg1 = '';
										list[i].TypeTagImgLen1 = '';
										break;
								}
								switch(list[i].TypeTagDisplay2){
									case "清洁":
										list[i].TypeTagImg2 = 'qj';
										list[i].TypeTagImgLen2 = '3';
										break;
									default:
										list[i].TypeTagImg2 = '';
										list[i].TypeTagImgLen2 = '';
										break;
								}
							}
							let PageCount = JSON.parse(res.data.Extend).PageCount;
							if (this.page > PageCount) {
								this.loadingType = 2;
								return;
							}
							this.listData = this.reload ? list : this.listData.concat(list);
							console.info(this.listData);
							this.reload = false;
							this.page++;
							this.loadingType = 0;
						}
					},
					fail: (e) => {
						console.info(e);
					}
				})
			},
			TaggarSelect(item) {
				if (this.Select[item]) {
					this.Select = [false, false, false, false];
					this.outheight = "auto";
					this.outoverflow = "auto";
				} else {
					this.Select = [false, false, false, false];
					this.Select[item] = !this.Select[item];
					this.outheight = this.windowHeight + "px";
					this.outoverflow = "hidden";
					console.info(this.windowHeight);
				}
			},
			TaggarSelectUl: function(index, type) {
				this.tabIndex[type] = index;
			},
			RemoveBG: function() {
				this.Select = [false, false, false, false];
				this.outheight = "auto";
				this.outoverflow = "auto";
			},
			moveHandle: function() {
				console.info("滑不了了");
			},
			labelBtn(name, index, labelList) {
				console.log(name, index, "nameindex")
				this.labelName = name
				if (this.labelDataList.join(',').indexOf(name) > -1) {
					labelList[index].checked = true
				} else {
					labelList[index].checked = false
				}
			},
			checkboxChange: function(e) {
				this.labelDataList = e.detail.value
				console.log(e)
				console.log('checkbox发生change事件，携带value值为：' + e.detail.value)
				console.log(this.labelDataList, "labelDataList")
			},
		}
	}
</script>

<style lang="less">
	.cu-bar .search-form {
		margin: 0;
		text-align: left;
		background: #e6e6e6;
		color: #868686;
	}

	.selectBox {
		background: #EB5248 !important;
		color: #fff !important;
	}

	.checkbox {
		padding: 5px 10px;
		border: 1px solid #EB5248;
		margin: 10px;
		border-radius: 7upx;
		color: #000;
	}

	.select-box {
		width: 100%;
		padding: 30upx 0 0;
		background: #fff;
		text-align: center;
		position: fixed;
		top: 130px;
		z-index: 0;
		opacity: 0;
	}

	.select-box.on {
		z-index: 11;
		opacity: 1;
	}

	.select-box .uni-input-div {
		flex: 1;
		padding: 10px;
	}

	.select-box .zhi {
		line-height: 96upx;
	}

	.select-box .uni-input-div .uni-input {
		background: #f2f2f2;
		padding: 0;
	}

	.select-input {
		border-top: 2upx solid #ddd;
	}

	.select-btn {
		padding: 20upx 0;
		font-size: 28upx;
	}

	.select-btn.on {
		color: #fff;
		background: #ff5f15;
	}

	.select-ul {
		padding: 0 20upx;
		margin-bottom: 10upx;
		overflow: auto;
	}

	.select-ul li {
		display: block;
		padding: 24upx 20upx;
		border-bottom: 2upx solid #fff;
		text-align: left;
		font-size: 28upx;
	}

	.select-ul li.on {
		color: #e7736d;
		border-bottom-color: #e7736d;
		position: relative;
	}

	.select-ul li.on:after {
		content: "\e62c";
		font-family: "iconfont";
		color: #e7736d;
		position: absolute;
		right: 50upx;
	}

	.select-item {
		font-size: 24upx;
		text-align: left;
		margin-bottom: 20upx;

		.select-item-title {
			margin-bottom: 10upx;
			line-height: 2;
			color: #666666;
			font-size: 28upx;
			display: block;
		}

		.select-item-list {
			padding: 0;

			.select-item-list-item {
				width: 25%;
				text-align: center;
				float: left;
				padding: 0;

				.select-item-list-item-btn {
					margin: 0 5% 10upx;
					border: 2upx solid #f6f6f6;
					background: #f6f6f6;
					color: #666666;
					box-sizing: border-box;
					border-radius: 6upx;
					width: 90%;
					text-align: center;
					font-size: 24upx;
					line-height: 2.5;
					display: block;
					padding: 0;

					&.on {
						background: #fff;
						border-color: #ff5f15;
						color: #ff5f15;
					}
				}

				&.w50 {
					width: 50%;

					.select-item-list-item-btn {
						margin: 0 2.5% 10upx;
						width: 95%;
					}
				}
			}
		}
	}

	.uni-navbar view .flex-item {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
	}

	.uni-navbar view .flex-item.on {
		color: #e7736d;
	}

	.uni-navbar view .flex-item .uni-icon {
		margin-left: 10upx;
	}

	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.window-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		display: none;
		display: none;
	}

	.window-bg.on {
		display: block;
	}

	.uni-list-cell {
		display: block;
		padding: 10upx;
	}

	.uni-house-img {
		position: relative;
	}

	.uni-house-img p.time {
		position: absolute;
		top: 0;
		left: 0;
		padding: 5px;
		opacity: .65;
		background: #000000;
		color: #fff;
		font-size: 12px;
	}

	.uni-house-img p.iconfont {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10px;
		color: #fff;
		font-size: 26px;
		line-height: 1;
	}

	.uni-house-txt {
		padding: 0 10upx;
	}

	.uni-house-txt .first span {
		margin-right: 20upx;
	}

	.uni-house-txt .first span.b {
		font-size: 40upx;
	}

	.uni-house-txt .three {
		font-size: 24upx;
	}

	.uni-house-txt .three span.iconfont {
		color: #fa3949;
		margin-right: 10upx;
	}

	.input-view {
		width: 92%;
		display: flex;
		background-color: #fff;
		height: 60upx;
		border-radius: 10upx;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 0;
		line-height: 60upx;
	}

	.input-view .uni-icon {
		line-height: 60upx !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}

	.uni-row .text-btn {
		padding: 0 20upx;
		background-color: #ff5f15;
		border: 2upx solid #FFFFFF;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		box-sizing: border-box;
		min-width: 35%;
	}

	.uni-row .text-btn.on {
		background: #FFFFFF;
		color: #ff5f15;
	}

	.uni-row .text-btn:first-child {
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
	}

	.uni-row .text-btn:last-child {
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
	}

	.uni-navbar {
		display: block;
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.uni-navbar view {
		line-height: 44px;
	}

	.uni-navbar .uni-navbar-container.uni-navbar-container-box {
		position: absolute;
	}

	.uni-navbar-shadow {
		-webkit-box-shadow: 0 1px 6px #ccc;
		box-shadow: 0 1px 6px #ccc;
	}

	.uni-navbar.uni-navbar-fixed {
		position: fixed;
		z-index: 998;
	}

	.uni-navbar-header {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		width: 100%;
		height: 44px;
		line-height: 44px;
		font-size: 16px;
	}

	.uni-navbar-header .uni-navbar-header-btns {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 60px;
		padding: 0 6px;
	}

	.uni-navbar-header .uni-navbar-header-btns:last-child {
		width: 30px;
	}

	.uni-navbar-container-box {
		width: 100%;
		position: absolute;
		top: 50%;
		margin-top: -26upx;
	}

	.uni-navbar-container-title {
		font-size: 15px;
		text-align: center;
		padding-right: 30px;
	}

	.model-main>.uni-row.model-item{
		padding: 30upx;
		overflow: hidden;
		position: relative;
		&:after{
			content: "";
			display: block;
			height: 2upx;
			width: 100%;
			background: #CCCCCC;
			left: 30upx;
			bottom: 0;
			position: absolute;
		}
		&:last-child:after{
			display: none;
		}
		.cu-avatar-box{
			.cu-avatar-name{
				font-size: 32upx;
				color: #333333;
				line-height: 48upx;
			}
			.cu-avatar-num{
				font-size: 28upx;
				color: #999999;
				line-height: 48upx;
			}
			.cu-avatar-main{
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}
	}
	.model-item{
		.model-item-img{
			width: 260upx;height: 260upx;border-radius: 10upx;
		}
		.hasvideo{
			position: absolute;
			left: 30upx;
			top: 30upx;
			width: 260upx;
			height: 260upx;
			text-align: left;
			padding: 90upx;
			box-sizing: border-box;
			image{
				width: 80upx;
				height: 80upx;
			}
		}
		.model-item-text{
			padding-left: 20upx;
			position: relative;
			.model-item-title,
			.model-item-title2{
				font-size: 30upx;
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				color: #333333;
			}
			.model-item-title{
				font-weight: 600;
			    -webkit-line-clamp: 2;
				height: 96upx;
				.label-box{
					height: 32upx;
					margin-right: 10upx;
					display: inline-block;
					vertical-align: text-top;
					&.kind1{
						width:84upx;
					}
					&.kind2{
						width:34upx;
					}
					&.kind3{
						width:58upx;
					}
				}
			}
			.model-item-title2{
				font-size: 26upx;
				color: #666666;
				line-height: 42upx;
				&.adr{
					font-size: 24upx;
				}
				&.main{
					.model-item-main-price{
						font-size: 30upx;
						color: #E03236;
						text{
							font-size: 24upx;
							margin:0 10upx 0 6upx;
						}
					}
				}
			}
			.model-item-main{
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>
